<template>
  <div style="width: 100%;height: 100vh;background: #B9CADF">
    <div class="content">
      <div class="top">
        <img src="../../../assets/img/top.png">
      </div>
      <div class="monitoring-left">
        <img src="../../../assets/img/sxt.png">
        <a-button style="position: absolute;bottom: 0;left: 27px;background: none;color:#62D0FE;border: none"
                  @click="$router.push('/wfinfo/monitoring/videoMonitoring')">视频监控
        </a-button>
      </div>
      <div class="monitoring-right">
        <div
          style="margin-bottom: 10px;display: flex;font-family: Microsoft YaHei;font-weight: bold;color: #000000;align-items: center;justify-content: center">
          蓄水池液位
          <div
            style="margin: 0 10px;width: 70px;height: 24px;text-align: center;background: #B9CADF;border: 2px solid rgb(122,132,144);font-weight: bold;color: #000000;">
            {{ xsc.substring(0, 6) }}
          </div>
          M
        </div>
        <img src="../../../assets/img/waters.png">
      </div>
      <div class="one">
        <img src="../../../assets/img/monitor.png">
        <div class="one-content">
          <div class="one-left">
            <div style="display:flex;width: 100%;align-items: center;justify-content: center">
              <div class="electric">
                <div style="margin: 0 10px;width: 70px;height: 24px;">
                </div>
              </div>
              <div class="electric">
              </div>
            </div>
            <div style="display:flex;width: 100%;margin: 10% 0 0 18%">
              <div class="electric">
                压力
                <div class="electric-box"
                     style="background: rgb(200,232,254); border: 1px solid rgb(122,132,144);font-weight: bold;color: #000000;">
                  {{ twoHyl.substring(0, 6) }}
                </div>
                Mpa
              </div>
            </div>
            <div style="display:flex;width: 100%;justify-content: flex-end; ">
              <div style="margin: 3% 17% 0 0;width: 67px;height: 24px;background: rgb(214,237,250);border-radius: 12px; text-align: center;line-height: 24px;font-weight: bold;
color:#000000;">
                真空泵
              </div>
            </div>
            <div style="margin: 3% 0 0 8%;display: flex">
              <div style="margin-top: 3%;width: 47px;height: 47px;background: #43DCCD;border: 1px solid #0C6F70;border-radius: 50%;font-size: 21px;font-family: Microsoft YaHei;font-weight: bold;
color: #000000;text-align: center;line-height: 47px">2#
              </div>
              <img v-show="twoYx=='1'" style="width: 60px;margin: 0% 0 0 5%" src="../../../assets/img/windmill.gif">
            </div>
            <div style="margin-top: 16%">
              <div style="margin-left: 28%">
                <div class="electric">
                  阀门
                  <div style="border: 1px solid #000000;"
                       :class="twoQFm == '1' ? 'green' : twoQFms == '1' ? 'red' : twoQFm == '0' && twoQFms == '0' ? 'green' : ''">
                    {{ twoQFm == '1' ? '开' : twoQFms == '1' ? '关' : twoQFm == '0' && twoQFms == '0' ? '半开' : '' }}
                  </div>
                  压力
                  <div class="electric-box"
                       style="background: rgb(200,232,254);border: 1px solid rgb(122,132,144);font-weight: bold;color: #000000;">
                    {{ twoQyl.substring(0, 6) }}
                  </div>
                  Mpa
                </div>
              </div>
            </div>
            <div style="margin-top: 6%">
              <div style="margin-left: 28%">
                <div class="electric">
                  阀门
                  <div style="border: 1px solid #000000;"
                       :class="oneQFm == '1' ? 'green' : oneQFms == '1' ? 'red' : oneQFm == '0' && oneQFms == '0' ? 'green' : ''">
                    {{ oneQFm == '1' ? '开' : oneQFms == '1' ? '关' : oneQFm == '0' && oneQFms == '0' ? '半开' : '' }}
                  </div>
                  压力
                  <div class="electric-box"
                       style="background: rgb(200,232,254);border: 1px solid rgb(122,132,144);font-weight: bold;color: #000000;">
                    {{ oneQyl.substring(0, 6) }}
                  </div>
                  Mpa
                </div>
              </div>
            </div>
            <div style="margin-top: 17%;display: flex">
              <div style="margin-left: 7%;width: 47px;height: 47px;background: #43DCCD;border: 1px solid #0C6F70;border-radius: 50%;font-size: 21px;font-family: Microsoft YaHei;font-weight: bold;
color: #000000;text-align: center;line-height: 47px">1#
              </div>
              <img v-show="oneYx=='1'" style="width: 60px;margin: -2% 0 0 5%" src="../../../assets/img/windmill.gif">
            </div>
            <div style="display:flex;width: 100%;justify-content: flex-end; ">
              <div style="margin: 3% 17% 0 0;width: 67px;height: 24px;background: rgb(214,237,250);border-radius: 12px; text-align: center;line-height: 24px;font-weight: bold;
color:#000000;">
                真空泵
              </div>
            </div>
            <div style="margin-top: 2%">
              <div class="electric" style="margin: 10% 0 0 15%;">
                压力
                <div class="electric-box"
                     style="background: rgb(200, 232, 254);border: 1px solid rgb(122,132,144);font-weight: bold;color: #000000;">
                  {{ oneHyl.substring(0, 6) }}
                </div>
                Mpa
              </div>
            </div>
            <div style="margin-top: 4%;display: flex">
              <div class="electric" style="margin: 6% 0 0 15%">
                <div style="margin: 0 10px;width: 70px;height: 24px;">
                </div>
              </div>
            </div>
          </div>
          <div class="one-right">
            <div style="width: 500px;">
              <div class="electric" style="margin: 1% 0 0 0%">
                压力
                <div class="electric-box"
                     style="background: rgb(200,232,254);border: 1px solid rgb(122,132,144);font-weight: bold;color: #000000;">
                  {{ twoJyl.substring(0, 6) }}
                </div>
                Mpa
              </div>
              <div class="electric" style="margin: 66% 0 0 0%">
                压力
                <div class="electric-box"
                     style="background: rgb(200,232,254);border: 1px solid rgb(122,132,144);font-weight: bold;color: #000000;">
                  {{ oneJyl.substring(0, 6) }}
                </div>
                Mpa
              </div>
            </div>
            <div style="padding-left: 20%">
              <div class="electric" style="margin: -10% 0 0 0%">
                压力
                <div class="electric-box"
                     style="background: rgb(200,232,254);border: 1px solid rgb(122,132,144);font-weight: bold;color: #000000;">
                  {{ twoCyl.substring(0, 6) }}
                </div>
                Mpa
              </div>
              <div class="electric" style="margin: 5% 0 0 0%">
                阀门
                <div style="border: 1px solid #000000;"
                     :class=" twoHFm == '1' ? 'green' : twoHFms == '1' ? 'red' : twoHFm == '0' && twoHFms == '0' ? 'green' : ''">
                  {{ twoHFm == '1' ? '开' : twoHFms == '1' ? '关' : twoHFm == '0' && twoHFms == '0' ? '半开' : '' }}
                </div>
              </div>
              <div class="electric" style="margin: 60% 0 0 0%">
                流量
                <div class="electric-box"
                     style="background: rgb(200,232,254);border: 1px solid rgb(122,132,144);font-weight: bold;color: #000000;">
                  {{ twoFlow }}
                </div>
                M³/S
              </div>
              <div class="electric" style="margin: 5% 0 0 -16%">
                累计水量
                <div class="electric-box"
                     style="background: rgb(200,232,254);border: 1px solid rgb(122,132,144);font-weight: bold;color: #000000;">
                  {{ twoCumWater }}
                </div>
                M³
              </div>
              <div class="electric" style="margin: 25% 0 0 -10%">
                压力
                <div class="electric-box"
                     style="background: rgb(200,232,254);border: 1px solid rgb(122,132,144);font-weight: bold;color: #000000;">
                  {{ oneCyl.substring(0, 6) }}
                </div>
                Mpa
              </div>
              <div class="electric" style="margin: 1.5% 0 0 -10%">
                阀门
                <div style="border: 1px solid #000000;"
                     :class="oneHFm == '1' ? 'green' : oneHFms == '1' ? 'red' : oneHFm == '0' && oneHFms == '0' ? 'green' : '' ">
                  {{ oneHFm == '1' ? '开' : oneHFms == '1' ? '关' : oneHFm == '0' && oneHFms == '0' ? '半开' : '' }}
                </div>
              </div>
              <div class="electric" style="margin: 78% 0 0 0%">
                流量
                <div class="electric-box"
                     style="background: rgb(200,232,254);border: 1px solid rgb(122,132,144);font-weight: bold;color: #000000;">
                  {{ flow }}
                </div>
              </div>
              <div class="electric" style="margin: 6% 0 0 -15%">
                累计水量
                <div class="electric-box"
                     style="background: rgb(200,232,254);border: 1px solid rgb(122,132,144);font-weight: bold;color: #000000;">
                  {{ cumWater }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>

import {overallSystem,} from "@api/device";

export default {
  data() {
    return {
      oneSystemInfo: [],
      twoSystemInfo: [],
      oneStatus: '',
      oneXscStatus: '',
      twoStatus: '',
      twoXscStatus: '',
      historyList: [],
      flow: '',
      twoFlow: '',
      cumWater: '',
      twoCumWater: '',
      oneJyl: '',
      oneQFm: '',
      oneQFms: '',
      oneCyl: '',
      oneQyl: '',
      oneHyl: '',
      oneHFm: '',
      oneHFms: '',
      oneYx: '',

      twoYx: '',
      twoJyl: '',
      twoQFm: '',
      twoQFms: '',
      twoCyl: '',
      twoQyl: '',
      twoHyl: '',
      twoHFm: '',
      twoHFms: '',
      xsc: '',
      timer: null,
    };
  },
  mounted() {
    this.timer = setInterval(this.get, 1000);
    this.overallSystemList()
  },
  // 清除定时器
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  },
  components: {},
  methods: {
    // 获取数据每一秒
    get() {
      // this.overallSystemList()
    },
    overallSystemList() {
      overallSystem().then(res => {
        console.log(res)
        this.xsc = res.result.yw
        this.oneYx = res.result.waterOne[0].deviceValue
        this.oneQFm = res.result.waterOne[1].deviceValue
        this.oneQyl = res.result.waterOne[2].deviceValue
        this.oneHyl = res.result.waterOne[3].deviceValue
        this.oneJyl = res.result.waterOne[7].deviceValue
        this.flow = res.result.waterOne[10].deviceValue
        this.oneCyl = res.result.waterOne[8].deviceValue
        this.cumWater = res.result.waterOne[9].deviceValue
        this.oneHFm = res.result.waterOne[4].deviceValue
        this.oneHFms = res.result.waterOne[5].deviceValue

        this.twoQFms = res.result.waterTwo[0].deviceValue
        this.twoQFm = res.result.waterTwo[1].deviceValue
        this.twoQyl = res.result.waterTwo[2].deviceValue
        this.twoHyl = res.result.waterTwo[6].deviceValue
        this.twoJyl = res.result.waterTwo[7].deviceValue
        this.twoCyl = res.result.waterTwo[8].deviceValue
        this.twoHFms = res.result.waterTwo[5].deviceValue
        this.twoHFm = res.result.waterTwo[3].deviceValue
        this.twoFlow = res.result.waterTwo[9].deviceValue

        this.twoCumWater = res.result.waterTwo[10].deviceValue
      }).catch(err => {
      })
    },
  }
}
</script>
<style scoped>
.content {
  width: 1670px;
  height: 100vh;
  background: #B9CADF;
  position: relative;
  margin: 0 auto;
}

.top {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.top-box {
  width: 184px;
  height: 36px;
  background: #000000;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 500;
  margin: 0 100px;
  color: #FFFEFE;
  text-align: center;
  line-height: 36px;
  cursor: pointer;
  box-shadow: 0px 0px 10px 0px rgba(53, 94, 225, 0.04);
  border-radius: 4px;
}

.active {
  color: #43DCCD;
}

.monitoring-left {
  position: relative;
  width: 136px;
  height: 100px;
  top: -45px;
  left: 50px;
}

.monitoring-right {
  position: absolute;
  width: 251px;
  height: 200px;
  top: 90px;
  right: 60px;
}

.one {
  width: 1690px;
  height: 700px;
  position: relative;
  padding: 25px;
  box-sizing: border-box;
}

.one > img {
  width: 1638px;
  height: 700px;
}

.one-content {
  position: absolute;
  top: 0;
  display: flex;
  width: 100%;
  height: 100%;
}

.one-left {
  width: 25%;
  height: 100%;
  padding-top: 4%;
}

.electric {
  display: flex;
  align-items: center;
  margin: 0 10px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #000000;
}

.electric-box {
  margin: 0 10px;
  width: 70px;
  height: 24px;
  text-align: center;
  background: #3C70CB;
  border: 1px solid #000000;
  color: #fff;
}

.green {
  width: 36px;
  height: 24px;
  background: #06C118;
  border: 1px solid #000000;
  text-align: center;
  line-height: 24px;
  margin: 0 10px;
  color: #fff;
}

.red {
  width: 36px;
  height: 24px;
  background: #F72A2A;
  text-align: center;
  line-height: 24px;
  margin: 0 10px;
  color: #fff;
}

.one-right {
  display: flex;
  padding-left: 19%;
  height: 100%;
  padding-top: 9%;
  width: 75%;
}

/deep/ .ant-tabs-bar {
  border-bottom: none;
}

/deep/ .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
  background: #417CF2 !important;
  color: #FFFFFF !important;
  border-radius: 20px;
  margin-right: 10px;
}

/deep/ .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  border: 1px solid #417CF2;
  border-radius: 20px;
  background: #B9CADF;
  color: #1D79FA;
  padding: 0 12px;
  height: 35px;
  line-height: 35px;
}

/deep/ .ant-table-empty .ant-table-body {
  background: #728FB3;
}

/deep/ .ant-table-bordered.ant-table-empty .ant-table-placeholder {
  background: #B9CADF;
}

/deep/ .ant-empty-description {
  color: #fff;
}

/deep/ .ant-table-bordered .ant-table-thead > tr > th, .ant-table-bordered .ant-table-tbody > tr > td {
  background: #FFFFFF;
  opacity: 0.8;
}

.actives {
  background: #417CF2 !important;
  border-color: #417CF2;
  color: #fff;
}
</style>

